<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test used background images</title>
<style>video { width: 60px; }</style>

<!-- Basic -->
<style>
#internal { background-image: url("internal.bmp"); }
#internal-unused { background-image: url("internal-unused.bmp"); }
#internal-noncaptured { background-image: url("internal-noncaptured.bmp"); }
</style>
<link rel="stylesheet" href="link.css">
<style>
@import "import.css";
</style>

<!-- Pseudo-classes/elements -->
<style>
#pseudo-hover:hover { background-image: url("pseudo-hover.bmp"); }
#pseudo-active:active { background-image: url("pseudo-active.bmp"); }
#pseudo-before::before { background-image: url("pseudo-before.bmp"); content: "X"; }
#pseudo-after::after { background-image: url("pseudo-after.bmp"); content: "X"; }
#pseudo-first-letter::first-letter { background-image: url("pseudo-first-letter.bmp"); }
#pseudo-first-line::first-line { background-image: url("pseudo-first-line.bmp"); }
</style>
</head>
<body>
<h2>Basic</h2>
<blockquote id="inline" style="background-image: url(inline.bmp)">inline</blockquote>
<blockquote>inline-noncaptured<video style="background-image: url(inline-noncaptured.bmp)"></video></blockquote>
<blockquote id="internal">internal</blockquote>
<blockquote>internal-noncaptured<video id="internal-noncaptured"></video></blockquote>
<blockquote id="link">link</blockquote>
<blockquote>link-noncaptured<video id="link-noncaptured"></video></blockquote>
<blockquote id="import">import</blockquote>
<blockquote>import-noncaptured<video id="import-noncaptured"></video></blockquote>

<h2>Pseudo-classes/elements</h2>
<blockquote id="pseudo-hover">hover</blockquote>
<blockquote id="pseudo-active">active</blockquote>
<blockquote id="pseudo-before">before</blockquote>
<blockquote id="pseudo-after">after</blockquote>
<blockquote id="pseudo-first-letter">first-letter</blockquote>
<blockquote id="pseudo-first-line">first-line<br>second line</blockquote>
</body>
</html>
